<template>
  <div class="item checked" v-if="checked" @click="navigatorTo">
    <img src="../../../assets/task/task_done.png" alt="" class="background">
    <div class="number">N:{{ o.id }}</div>
    <div class="content">
      <div class="name">{{ o.name }}</div>
      <div class="point">

        <img src="../../../assets/task/point_done.png" alt="">

        <span>{{ o.point }} 分</span>
      </div>

      <img src="../../../assets/task/start_done.png" alt="" class="button">

    </div>
  </div>
  <div class="item" v-else-if="o.name" @click="navigatorTo">
    <img src="../../../assets/task/task.png" alt="" class="background">
    <div class="number">N:{{ o.id }}</div>
    <div class="content">
      <div class="name">{{ o.name }}</div>
      <div class="point">

        <img src="../../../assets/task/point.png" alt="">

        <span>{{ o.point }} 分</span>
      </div>

      <img src="../../../assets/task/start.png" alt="" class="button">

    </div>
  </div>
  <div v-else class="item">
    <img src="../../../assets/task/task.png" alt="" class="background" style="opacity: 0">
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: {
    o: Object,
  },
  data() {
    return {
      checked: false,
    };
  },
  created() {
    this.on_checked();

    let self = this;
    this.channels.$on('update_checked', function () {
      self.on_checked();
    });
  },
  methods: {
    on_checked(userinfo = null) {
      if (this.o.name) {
        let userinfo = userinfo?userinfo:this.$store.getters.userinfo;
        let checked = userinfo.checked;

        for (let i in checked) {
          let image = checked[i].image;
          if (image.id === this.o.id) {
            this.checked = true;
          }
        }
      }
    },
    navigatorTo() {
      this.$router.push({
        path: '/detail',
        query: {
          back: location.pathname + location.hash,
          id: this.o.id,
        }
      });
    },
  },
};
</script>

<style scoped>
.item {
  position: relative;
  font-size: 1.3vw;
  color: #fff;
  flex: 1;
  display: inline-block;
  margin: 1.5vw;
  cursor: pointer;
}

.item.checked * {
  color: #ffffff;
}

.background {
  width: 100%;
  user-select: none;
}

.number {
  position: absolute;
  top: .2vw;
  font-size: 1vw;
  left: .5vw;
  color: #c2faff;
  font-family: DINPro-Bold;
}

.content {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-54%, -50%);
  text-align: center;
}

.content * {
  color: #c2faff;
}

.content .point,
.point * {
  vertical-align: middle;
}

.point {
  margin: 1vw 0;
}

.content .point img {
  width: 1vw;
}

.name {
  font-size: 1.1vw;
  font-family: DINPro-Bold;
}

.point span {
  font-size: .9vw;
  padding-left: .3vw;
  /*font-family: DINPro-Bold;*/
  font-weight: 600;
}

.button {
  width: 61%;
}
</style>
